<template>
  <div class="main bzb-user-report-list">
    <section>
      <search-form :listQuery="listQuery" :queryConfig="queryConfig" :labelWidth="130" :search="search"/>
      <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
        <el-table-column label="序号" align="center" type="index" :index="(index)=>{return indexMethod(index, listQuery)}"  width="80"></el-table-column>
        <el-table-column label="被举报用户ID" prop="reportedUserId" min-width="100" align="center"></el-table-column>
        <el-table-column label="被举报用户昵称" prop="reportedNickName" min-width="100" align="center"></el-table-column>
        <el-table-column label="被举报用户姓名" prop="reportedRealName" min-width="100" align="center"></el-table-column>
        <el-table-column label="被举报用户手机号" prop="reportedUserMobile" min-width="100" align="center"></el-table-column>
        <el-table-column label="被举报次数" prop="reportedNumber" min-width="100" align="center"></el-table-column>
        <el-table-column label="状态" prop="status" min-width="100" align="center">
          <template slot-scope="scope">
            {{ ['未禁言', '已禁言'][scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column label="更新时间" prop="updatedAt" width="100" align="center">
          <template slot-scope="scope">{{ formatDate(scope.row.updatedAt, 'YYYY-MM-DD HH:mm:ss') }}</template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="190" v-if="rightsButtons['detail'] || rightsButtons['operate']">
          <template slot-scope="scope">
            <el-button v-if="rightsButtons['detail']" type="primary" size="mini" plain @click="btnClick(scope.row, 'detail')">明细</el-button>
            <template v-if="rightsButtons['operate']">
              <el-button v-if="scope.row.status" type="success" size="mini" plain @click="btnClick(scope.row, 'cancel')">取消禁言</el-button>
              <el-button v-else type="danger" size="mini" plain @click="btnClick(scope.row, 'disable')">禁言</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="listQuery.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal">
      </el-pagination>

      <el-dialog custom-class="report-dialog" title="举报明细" :visible.sync="dialogVisible">
        <el-table :data="detail.list" v-loading="detail.listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
          <el-table-column label="序号" align="center" type="index" :index="(index)=>{return indexMethod(index, listQuery)}"  width="80"></el-table-column>
          <el-table-column label="被举报人昵称" prop="reportedNickname" width="120" align="center"></el-table-column>
          <el-table-column label="被举报内容" prop="reportContent" min-width="100" align="center"></el-table-column>
          <el-table-column label="举报原因" prop="reportType" width="100" align="center">
            <template slot-scope="scope">{{['','广告欺诈','淫秽色情','骚扰谩骂', '反动政治','其他内容'][scope.row.reportType]}}</template>
          </el-table-column>
          <el-table-column label="举报人ID" prop="reportUserId" min-width="100" align="center"></el-table-column>
          <el-table-column label="举报人" prop="reportNickname" min-width="100" align="center"></el-table-column>
          <el-table-column label="直播ID" prop="roundId" width="100" align="center"></el-table-column>
          <el-table-column label="直播名称" prop="liveTitle" min-width="100" align="center"></el-table-column>
          <el-table-column label="举报时间" prop="createdAt" width="100" align="center">
            <template slot-scope="scope">{{ formatDate(scope.row.createdAt, 'YYYY-MM-DD HH:mm:ss') }}</template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleDetailSizeChange"
          @current-change="handleDetailCurrentChange"
          :current-page.sync="detail.listQuery.pageNo"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="detail.listQuery.pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="detail.listTotal">
        </el-pagination>
        <span slot="footer" class="dialog-footer">
          <template v-if="rightsButtons['operate']">
            <el-button v-if="detail.status" type="success" size="small" plain @click="btnClick(detail.listQuery, 'cancel')">取消禁言</el-button>
            <el-button v-else type="danger" size="small" plain @click="btnClick(detail.listQuery, 'disable')">禁言</el-button>
          </template>
          <el-button type="default" size="small" @click="dialogVisible = false">关 闭</el-button>
        </span>
      </el-dialog>
    </section>
  </div>
</template>

<script>
  import searchForm from '@/components/searchForm/index'
  export default {
    name: 'bzb-userreportlist',
    components: {
      searchForm
    },
    data() {
      return {
        listLoading: false,
        listQuery: {
          mobile: '', // 手机号
          nickName: '', // 昵称
          status: '', // 状态 0：未禁言 1：已禁言
          pageNo: 1,
          pageSize: 10,
        },
        queryConfig: [
          {
            prop: 'mobile',
            type: 'input',
            label: '手机号'
          },
          {
            prop: 'nickName',
            type: 'input',
            label: '昵称'
          },
          {
            prop: 'status',
            type: 'select',
            label: '状态',
            data: [
              { label: '全部', value: '' },
              { label: '未禁言', value: 0 },
              { label: '已禁言', value: 1 }
            ]
          }
        ],
        list: [], // 表格数据
        listTotal: 0, // 表格数据总条数

        dialogVisible: false,
        detail: {
          status: 1,
          listQuery: {
            reportedUserId: '',
            pageNo: 1,
            pageSize: 10
          },
          listLoading: false,
          list: [], // 表格数据
          listTotal: 0, // 表格数据总条数
        }
      }
    },
    created() {
      this.getList();
    },
    methods: {
      // 获取列表
      getList () {
        this.listLoading = true;
        this.request({
          url: '/live-bzb-manage/live-user-report/query',
          method: 'get',
          params: this.listQuery
        }).then(({ data }) => {
          this.list = data.records;
          this.listTotal = data.total;
          this.listLoading = false;
        }).catch(err => {
          this.list = [];
          this.listTotal = 0;
          this.listLoading = false;
        })
      },
      search () {
        this.listQuery.pageNo = 1;
        this.getList();
      },
      handleSizeChange (value) {
        this.listQuery.pageSize = value;
        this.getList()
      },
      handleCurrentChange(val){
        this.listQuery.pageNo = val;
        this.getList();
      },
      btnClick(row, type) {
        if(type === 'detail') {
          this.detail.status = row.status
          this.detail.listQuery = {
            reportedUserId: row.reportedUserId,
            pageNo: 1,
            pageSize: 10
          }
          this.showDetail()
          console.log(row, type)
        } else {
          const title = {
            cancel: '确定取消禁言吗？',
            disable: '确定禁言吗？'
          }
          this.$confirm(title[type], '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.itemOperate({
              reportedUserId: row.reportedUserId,
              controlType: type === 'cancel' ? 0 : 1
            })
          }).catch(() => {
            this.$message({ type: 'info', message: '已取消操作' })
          })
        }
      },
      showDetail() {
        this.detail.listLoading = true;
        this.request({
          url: '/live-bzb-manage/live-user-report/detail',
          method: 'get',
          params: this.detail.listQuery
        }).then(({ data }) => {
          this.detail.list = data.records;
          this.detail.listTotal = data.total;
          this.detail.listLoading = false;
          this.dialogVisible = true
        }).catch(err => {
          this.detail.list = [];
          this.detail.listTotal = 0;
          this.detail.listLoading = false;
        })
      },
      handleDetailSizeChange (value) {
        this.detail.listQuery.pageSize = value;
        this.showDetail()
      },
      handleDetailCurrentChange(val){
        this.detail.listQuery.pageNo = val;
        this.showDetail();
      },
      itemOperate(data) {
        this.request({
          url: '/live-bzb-manage/live-user-report/globle-speak/control',
          method: 'post',
          data
        }).then(({ data }) => {
          this.$message.success('操作成功')
          this.getList()
          this.dialogVisible = false
        }).catch(err => {
          //
        })
      }
    }
  }
</script>

<style lang="scss">
.report-dialog{
  max-width: 1200px;
  .el-pagination{
    margin-right: 30px;
  }
}
</style>
